import React from "react";
import { Input, Select, Switch, Button } from "antd";
import VCodeEditor from "components/VCodeEditor";
import { jsonUtils } from "utils";
import "./index.scss";

interface ButtonConfig {
    text: string;
    type?: "primary" | "ghost" | "dashed" | "link" | "text" | "default";
    size?: "large" | "middle" | "small";
    danger?: boolean;
    disabled?: boolean;
    shape?: "circle" | "round";
    extra?: {[key: string]: any};
}
interface IButtonSettingProps {
    value: ButtonConfig[];
    onChange: (value: ButtonConfig[]) => void;
}
const typeOptions = [{label: "Primary", value: "primary"}, {label: "Ghost", value: "ghost"}, {label: "Dashed", value: "dashed"}, {label: "Link", value: "link"}, {label: "Text", value: "text"}, {label: "Default", value: "default"}];
const sizeOptions = [{label: "Large", value: "large"}, {label: "Middle", value: "middle"}, {label: "Small", value: "small"}];
const shapeOptions = [{label: "Circle", value: "circle"}, {label: "Round", value: "round"}];
const ButtonSetting: React.FC<IButtonSettingProps> = (props) => {
    const btns = props.value || [];
    const onBtnsChange = (index: number, key: string, value: any) => {
        btns[index] = {
            ...btns[index],
            [key]: value
        };
        const newBtns = [...btns];
        props.onChange(newBtns);
    }
    const renderBtnSetting = (btnConfig: ButtonConfig, index: number) => {
        return <ul className="button-setting-list">
            <li className="button-setting-item">
                <label>按钮文本</label>
                <div className="button-setting-control-wrapper">
                    <Input placeholder="按钮文本" value={btnConfig?.text} onChange={(e) => onBtnsChange(index, "text", e.target.value)}></Input>
                </div>
            </li>
            <li className="button-setting-item">
                <label>按钮类型</label>
                <div className="button-setting-control-wrapper">
                    <Select options={typeOptions} value={btnConfig.type} placeholder="按钮类型" onChange={(value) => onBtnsChange(index, "type", value)}></Select>
                </div>
            </li>
            <li className="button-setting-item">
                <label>按钮尺寸</label>
                <div className="button-setting-control-wrapper">
                    <Select options={sizeOptions} value={btnConfig.size} placeholder="按钮尺寸" onChange={(value) => onBtnsChange(index, "size", value)}></Select>
                </div>
            </li>
            <li className="button-setting-item">
                <label>Danger按钮</label>
                <div className="button-setting-control-wrapper">
                    <Switch checked={btnConfig.danger} onChange={(checked) => onBtnsChange(index, "danger", checked)} />
                </div>
            </li>
            <li className="button-setting-item">
                <label>按钮禁用</label>
                <div className="button-setting-control-wrapper">
                    <Switch checked={btnConfig.disabled} onChange={(checked) => onBtnsChange(index, "disabled", checked)} />
                </div>
            </li>
            <li className="button-setting-item">
                <label>按钮边框</label>
                <div className="button-setting-control-wrapper">
                    <Select options={shapeOptions} value={btnConfig.shape} placeholder="按钮边框"  onChange={(value) => onBtnsChange(index, "shape", value)}></Select>
                </div>
            </li>
            <li className="button-setting-item">
                <label>自定义属性</label>
                <div className="button-setting-control-wrapper">
                    <VCodeEditor value={jsonUtils.convertToString(btnConfig.extra) || `{}`} onChange={(code) => onBtnsChange(index, "extra", code)} btnText="自定义按钮属性" btnExtra={{type: "primary", style: {borderRadius: "16px"}}} 
                        alertMessage={"自定义按钮属性内容请参照Antd Button中可配置属性，此处配置的属性内容将会依次传递给对应按钮组件."}
                    />
                </div>
            </li>
        </ul>
    }
    const addBtn = () => {
        const newBtns = [...btns, { text: "按钮" }];
        props.onChange(newBtns);
    }
    return <div className="v-button-setting-wrapper">
        {
            btns.map((item, index) => {
                return <div className="button-setting-index">
                    <span>按钮{index}</span>
                    {renderBtnSetting(item, index)}
                </div>
            })
        }
        <div className="add-btn">
            <Button type="primary" size="middle" onClick={() => addBtn()}>添加按钮</Button>
        </div>
    </div>
}

export default ButtonSetting;